import { View, Text } from '@tarojs/components';
import React, { Component, } from 'react'
import { Field, Picker, Cell, Popup } from '@antmjs/vantui'
import classNames from 'classnames'
import './index.scss'


// PdsField 需要的参数
interface PdsFormPickerComponentProps extends BaseComponentProps {
    name?: string, // 名称
    disabled?: boolean,//是否可以弹框
    placeholder?: string, // 
    onChange?: Function, // 接受一个函数类型的 onSubmit 属性
    data?: Array<any>, //用于给自定义类型的数据
    selectData?: any//选中的数据
}

class PdsFormPicker extends Component<PdsFormPickerComponentProps, any> {

    defaultProps = {
        name: "",
        placeholder: '请选择',
        disabled: false,
        onChange: () => {
        }
    }

    constructor(props) {
        super(props);
        this.state = { value: '', showPopUP: false }
    }

    componentDidUpdate(prevProps) {
        if (this.props.data !== prevProps.data) {
            // 当某个特定的prop值发生变化时执行逻辑
            console.log('Prop value has changed:', this.props.selectData);
            this.setState({ value: this.props.selectData })
            // 进行其他操作...
        }
    }



    handleClickInput = () => {
        const { disabled } = this.props
        if (!disabled) {
            this.setState({ showPopUP: true })
        }
    }

    onCancel = () => {
        this.setState({ showPopUP: false })
    }

    onConfirm = (event) => {
        const { value, index } = event.detail
        const { onChange } = this.props
        console.log(value, index)
        this.setState({ value: value, showPopUP: false })
        if (onChange) {
            onChange(value)
        }
    }

    render() {
        const { value, showPopUP } = this.state
        const { name, placeholder, className, data,disabled } = this.props

        return (
            <View className={classNames(className, 'pds-from-picker')}>
                <Text>{name}</Text>
                {/* 使用这控件有点小问题 */}
                <Field
                    value={value}
                    placeholder={placeholder}
                    border={false}
                    disabled={disabled}
                    isLink
                    arrowDirection='down'
                    onClickInput={this.handleClickInput.bind(this)}
                />
                {/* <Cell title="圆角弹窗" isLink arrowDirection="down" url={this.handleClickInput.bind(this)} /> */}
                <Popup show={showPopUP} position='bottom' onClose={this.onCancel.bind(this)}>
                    <Picker defaultIndex={2} columns={data} onCancel={this.onCancel.bind(this)} onConfirm={this.onConfirm.bind(this)} />
                </Popup>

            </View>
        );
    }
}

export default PdsFormPicker;


